<template>
	<view :class="['qn-page-' + theme]">
		<view>
			<u-tabs-swiper
				:activeColor="primaryColor"
				ref="tabs"
				:bold="false"
				:list="list"
				:current="current"
				@change="tabsChange"
				:is-scroll="false"
				swiperWidth="750"
			></u-tabs-swiper>
		</view>
		<Aempty text="暂无优惠券～～" src="../../static/empty/coupon.png" v-if="!coupon_list.length"></Aempty>
		<swiper :current="swiperCurrent" class="coupon-swiper" @change="swiperChange">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<scroll-view scroll-y class="coupon-scroll" @scrolltolower="onreachBottom">
					<view>
						<view class="ticket" :class="['coupon-li' + type]" v-for="(itemC, indexC) in coupon_list" :key="indexC">
							<view class="left">
								<view class="price-view">
									<view class="top" :class="[[4, 5].includes(type) ? 'primary-color' : '']">
										￥
										<text class="big">{{ itemC.reducePrice }}</text>
									</view>
									<view class="c-desc">满{{ itemC.minPrice }}可用</view>
								</view>
								<view class="introduce">
									<view class="title ellipsis">{{ itemC.name }}</view>
									<view class="c-tag primary-btn-pain">
										{{
											itemC.applyRange === 10
												? '全场通用'
												: itemC.applyRange === 20
												? '指定分类'
												: itemC.applyRange === 30
												? '指定品牌'
												: itemC.applyRange === 40
												? '指定商品'
												: ''
										}}
									</view>
									<view class="date u-line-1">{{ $u.timeFormat(itemC.startTime, 'yyyy.mm.dd') }}-{{ $u.timeFormat(itemC.endTime, 'yyyy.mm.dd') }}</view>
								</view>
							</view>
							<view class="right">
								<view class="use immediate-use primary-btn-pain" :round="true" v-if="type === 5" @click="goPage('/pages/cate/index', 'switchTab')">去使用</view>
								<text class="ibonfont ibonyishiyong" v-if="type === 4"></text>
								<text class="ibonfont ibonyiguoqi" v-if="type === 3"></text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			pageSize: 10,
			pageTotal: 0,
			type: 5,
			coupon_list: [],
			// type
			// 5 等待使用
			// 4 已使用
			// 3 已过期
			list: [
				{
					name: '未使用',
					type: 5
				},
				{
					name: '已使用',
					type: 4
				},
				{
					name: '已过期',
					type: 3
				}
			],
			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0 // swiper组件的current值，表示当前那个swiper-item是活动的
		};
	},
	onShow() {
		if (this.$store.state.hasLogin) {
			this.couponSearch();
		}
	},
	methods: {
		couponSearch() {
			this.$u.api
				.couponSearch({
					page: this.page,
					pageSize: this.pageSize,
					type: this.type
				})
				.then(res => {
					const arr = res.data.map(item => {
						return {
							...item,
							reducePrice: Number(item.reducePrice),
							minPrice: Number(item.minPrice)
						};
					});
					this.coupon_list = arr;
					this.pageTotal = res.pageTotal;
				});
		},
		// tabs通知swiper切换
		tabsChange(index) {
			this.swiperCurrent = index;
			this.current = index;
		},
		swiperChange(e) {
			this.current = e.detail.current;
			switch (e.detail.current) {
				case 0:
					this.type = 5;
					break;
				case 1:
					this.type = 4;
					break;
				case 2:
					this.type = 3;
					break;
			}
			this.couponSearch();
		},
		// scroll-view到底部加载更多
		onreachBottom() {}
	}
};
</script>
<style lang="scss">
.coupon-swiper {
	height: calc(100vh - 80rpx);
}
.coupon-scroll {
	height: calc(100vh - 80rpx);
}
.ticket {
	width: 706upx;
	margin: 20upx auto 0;
	display: flex;
	.left {
		width: 70%;
		padding: 30rpx 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		border-right: dashed 2rpx rgb(224, 215, 211);
		display: flex;
		.price-view {
			width: 172rpx;
			text-align: center;
			.top {
				color: $price-color;
				font-size: 28rpx;
				.big {
					font-size: 60rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}
			}
			.c-desc {
				font-size: 24upx;
				color: $u-type-info-dark;
			}
		}
		.introduce {
			width: 274rpx;
			margin-left: 10rpx;
			.title {
				font-size: 28rpx;
				-webkit-line-clamp: 1;
			}
			.c-tag {
				padding: 0 12upx;
				line-height: 36upx;
				height: 36upx;
				border: 1px solid $price-color;
				color: $price-color;
				font-size: 22upx;
				display: inline-block;
				margin: 10upx 0;
				border-radius: 4upx;
			}
			.date {
				font-size: 24rpx;
				color: $u-type-info-dark;
			}
		}
	}
	.right {
		width: 30%;
		padding: 40rpx 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		.use {
			padding: 0 24rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
			color: $price-color;
			border: 1px solid $price-color;
			line-height: 58rpx;
			height: 60rpx;
			margin-left: 20rpx;
		}
	}
}
.coupon-li4 {
	.left {
		.price-view {
			.top {
				opacity: 0.6;
			}
		}
		.introduce {
			.title {
				color: #999999;
			}
		}
	}
	.right {
		position: relative;
		.ibonfont {
			font-size: 120rpx;
			color: #999999;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			display: block;
			right: 50rpx;
		}
	}
}
.coupon-li3 {
	.left {
		.price-view {
			.top {
				color: #999999;
			}
		}
		.introduce {
			.title {
				color: #999999;
			}
		}
	}
	.right {
		position: relative;
		.ibonfont {
			font-size: 120rpx;
			color: #ff8181;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			display: block;
			right: 50rpx;
		}
	}
}
</style>
